
<template>
  <header>
    <div class="wrapper">
      <nav>
        <!-- router-link 通过一个作用域插槽 (opens new window)暴露底层的定制能力 -->
        <!-- 1. 默认情况下router-link会被渲染成a标签 => Vue-router@3.1 新增custom属性,允许用户在router-link插槽内容中自定义渲染的内容
             2. router-link 通过一个作用域插槽 (opens new window)暴露底层的定制能力
             v-slot="{ href, route, navigate, isActive, isExactActive }
              href：解析后的 URL。将会作为一个 a 元素的 href attribute。
              route：解析后的规范化的地址。 (当前路由信息)
              navigate：触发导航的函数。会在必要时自动阻止事件，和 router-link 同理。
              isActive：如果需要应用激活的 class 则为 true。允许应用一个任意的 class。
              isExactActive：如果需要应用精确激活的 class 则为 true。允许应用一个任意的 class。
        
         -->
        <RouterLink to="/" custom v-slot="{ href, route, navigate, isActive, isExactActive }">
           <span @click="navigate" :class="{'active-class':isActive,'exact-active-class':isExactActive}">home</span>
        </RouterLink> |
        <RouterLink to="/about" custom v-slot="{ href, route, navigate, isActive, isExactActive }">
           <span @click="navigate" :class="{'active-class':isActive,'exact-active-class':isExactActive}">about</span>
        </RouterLink> 
        <RouterLink to="/pinia/base" custom v-slot="{ href, route, navigate, isActive, isExactActive }"> |
           <span @click="navigate" :class="{'active-class':isActive,'exact-active-class':isExactActive}">base</span>
        </RouterLink>  |
        <RouterLink to="/pinia/better" custom v-slot="{ href, route, navigate, isActive, isExactActive }"> |
           <span @click="navigate" :class="{'active-class':isActive,'exact-active-class':isExactActive}">better</span>
        </RouterLink>  |
        <RouterLink to="/pinia/setup" custom v-slot="{ href, route, navigate, isActive, isExactActive }"> |
           <span @click="navigate" :class="{'active-class':isActive,'exact-active-class':isExactActive}">setup</span>
        </RouterLink>  |
      </nav>
    </div>
  </header>
  <RouterView />
</template>


<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>


<style scoped>
.active-class{
  color: red;
}
a{
  color: inherit;
  text-decoration: none;
}
nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

</style>
